import React from 'react';
import { Modal, message } from 'antd';
import { connect } from 'dva';
import SearchEmp from '../../components/SearchEmpWithState';

@connect()
class ReduceEmployeeMinusModal extends React.Component {
  formRef = React.createRef();

  state = {
    loadingFlag: false,
  };

  // 提交减员模态框数据
  submitModalData = async () => {
    const { dispatch, onOk } = this.props;
    try {
      await this.setState({ loadingFlag: true });
      const values = await this.formRef?.current?.validateFields();
      if (!values.empInfo?.custId) {
        return message.warning('请填写证件号并点击放大镜查询到员工后再提交。');
      }
      const params = {
        custId: values.empInfo.custId,
        sendId: values.empInfo.sendId,
      };
      onOk(params);
      dispatch({
        type: 'reducemp/cancleList',
        payload: {},
      });
    } catch (e) {
      console.error(e);
    } finally {
      this.setState({
        loadingFlag: false,
      });
    }
  };

  // 取消
  handleCancel = async () => {
    const { dispatch, onCancel } = this.props;
    if (onCancel) {
      onCancel();
    }
    try {
      await dispatch({
        type: 'reducemp/cancleList',
        payload: {},
      });
      this.formRef?.current?.resetFields();
    } catch (error) {
      console.error(error);
    }
  };

  render() {
    const { modalVisible } = this.props;
    const { loadingFlag } = this.state;
    // 模态框布局
    const formItemLayoutModal = {
      labelCol: { md: { span: 5 } },
      wrapperCol: { md: { span: 17, offset: 1 } },
    };
    // 模态框配置
    const modalConfig = {
      title: '查询员工',
      visible: modalVisible,
      onOk: this.submitModalData,
      okText: '提交',
      onCancel: this.handleCancel,
      destroyOnClose: true,
      confirmLoading: loadingFlag,
    };
    return (
      <Modal {...modalConfig}>
        <SearchEmp
          ref={this.formRef}
          params={{ taskSource: 2 }}
          filedName="sendId"
          formItemLayout={formItemLayoutModal}
        />
      </Modal>
    );
  }
}

export default ReduceEmployeeMinusModal;
